<template>
  <div class="ctn">
    <div class="top-bar"><i class="el-icon-star-on"></i> 数据统计</div>
    <el-row>
      <el-col :span="6"
        ><div class="board">
          <div class="number">
            <span>￥</span>{{ saleData.sale_today.payment || "0.00" }}
          </div>
          <div class="text">今日销售额</div>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="board">
          <div class="number red">{{ saleData.sale_today.count }}</div>
          <div class="text">今日订单数</div>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="board">
          <div class="number">
            <span>￥</span>{{ saleData.sale.payment || "0.00" }}
          </div>
          <div class="text">总销售额</div>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="board">
          <div class="number">{{ saleData.sale.count }}</div>
          <div class="text">总订单数</div>
        </div></el-col
      >
    </el-row>
    <div class="table-container">
      <el-tabs v-model="tabName" type="card">
        <el-tab-pane label="邀请提成" name="1">
          <div class="container">
            <el-table
              :data="list"
              style="width: 100%;margin-top:5px;"
              :height="tableHeight"
              border
              stripe
            >
              <el-table-column type="index" width="50"> </el-table-column>
              <el-table-column label="头像" width="100" align="center">
                <template slot-scope="scope">
                  <img
                    style="width:50px;height:50px;"
                    :src="scope.row.user.avatar"
                    alt=""
                  />
                </template>
              </el-table-column>
              <el-table-column label="用户/ID">
                <template slot-scope="scope">
                  {{ scope.row.user.nickname }}/{{ scope.row.user.username }}
                </template>
              </el-table-column>
              <el-table-column label="等级">
                <template slot-scope="scope">
                  {{ scope.row.user.level_id }}
                </template>
              </el-table-column>
              <el-table-column prop="mobile" label="绑定手机号">
                <template slot-scope="scope"
                  >{{ scope.row.user.username }}
                </template>
              </el-table-column>
              <el-table-column label="推荐时间">
                <template slot-scope="scope">
                  {{ scope.row.user.created_at }}
                </template>
              </el-table-column>
              <el-table-column label="奖励">
                <template slot-scope="scope">
                  ￥{{ scope.row.bonus }}
                </template>
              </el-table-column>
            </el-table>
            <div class="table-bottom-bar">
              <div></div>
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="page"
                :page-size="size"
                layout="total, prev, pager, next"
                :total="total"
                :background="true"
              >
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="订单提成" name="2">
          <div class="container">
            <el-table
              :data="list"
              style="width: 100%;margin-top:5px;"
              :height="tableHeight"
              border
              stripe
            >
              <el-table-column type="index" width="50"> </el-table-column>
              <el-table-column
                prop="order_no"
                label="订单号"
                width="100"
                align="center"
              >
              </el-table-column>
              <el-table-column label="用户/ID">
                <template slot-scope="scope">
                  {{ scope.row.user.nickname }}/{{ scope.row.user.username }}
                </template>
              </el-table-column>
              <el-table-column label="商品信息">
                <template slot-scope="scope">
                  <div style="display:flex;align-items:center;">
                    <img
                      style="width:50px;height:50px;object-fit:cover;"
                      :src="scope.row.img"
                      alt=""
                    />
                    <div>{{ scope.row.name }}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="实际付款">
                <template slot-scope="scope">
                  ￥{{ scope.row.payment }}
                </template>
              </el-table-column>
              <el-table-column label="提成">
                <template slot-scope="scope">
                  ￥{{ scope.row.bonus }}
                </template>
              </el-table-column>
              <el-table-column label="下单时间">
                <template slot-scope="scope">
                  {{ scope.row.created_at.date.split(".")[0] }}
                </template>
              </el-table-column>
            </el-table>
            <div class="table-bottom-bar">
              <div></div>
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="page"
                :page-size="size"
                layout="total, prev, pager, next"
                :total="total"
                :background="true"
              >
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="地区收益" name="3">
          <div class="container">
            <el-table
              :data="list"
              style="width: 100%;margin-top:5px;"
              :height="tableHeight"
              border
              stripe
            >
              <el-table-column type="index" width="50"> </el-table-column>
              <el-table-column
                prop="order_no"
                label="订单号"
                width="100"
                align="center"
              >
              </el-table-column>
              <el-table-column label="用户/ID">
                <template slot-scope="scope">
                  {{ scope.row.user.nickname }}/{{ scope.row.user.username }}
                </template>
              </el-table-column>
              <el-table-column label="商品信息">
                <template slot-scope="scope">
                  <div style="display:flex;align-items:center;">
                    <img
                      style="width:50px;height:50px;object-fit:cover;"
                      :src="scope.row.img"
                      alt=""
                    />
                    <div>{{ scope.row.name }}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="实际付款">
                <template slot-scope="scope">
                  ￥{{ scope.row.payment }}
                </template>
              </el-table-column>
              <el-table-column label="提成">
                <template slot-scope="scope">
                  ￥{{ scope.row.bonus }}
                </template>
              </el-table-column>
              <el-table-column label="下单时间">
                <template slot-scope="scope">
                  {{ scope.row.created_at.date.split(".")[0] }}
                </template>
              </el-table-column>
            </el-table>
            <div class="table-bottom-bar">
              <div></div>
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="page"
                :page-size="size"
                layout="total, prev, pager, next"
                :total="total"
                :background="true"
              >
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getAgentSaleData, getAgentEarningList } from "@/api/agent-mng";
export default {
  name: "EarningMngIndex",
  data() {
    return {
      saleData: {
        sale: {
          payment: 0,
          count: 0
        },
        sale_today: {
          payment: 0,
          count: 0
        }
      },
      tabName: "1",
      list: [],
      total: 0,
      size: 0,
      page: 1,
      tableHeight: 0
    };
  },

  computed: {},

  watch: {
    tabName: function(val) {
      this.getAgentEarningList(1);
    }
  },

  methods: {
    getAgentEarningList(page) {
      getAgentEarningList({
        page,
        status: this.tabName
      }).then(res => {
        if (res.code === 200) {
          this.list = res.data.data;
          this.total = res.data.total;
          this.page = res.data.current_page;
          this.size = res.data.per_page;
        }
      });
    },
    handleCurrentChange(page) {
      this.getAgentEarningList(page);
    },
    changeSize() {
      this.tableHeight = document.body.clientHeight - 470;
      window.onresize = () => {
        this.changeSize();
      };
    }
  },

  created() {
    this.changeSize();
    this.getAgentEarningList(1);
    getAgentSaleData().then(res => {
      if (res.code === 200) {
        this.saleData.sale = res.data.sale;
        this.saleData.sale_today = res.data.sale_today;
      }
    });
  },

  components: {}
};
</script>
<style lang="scss" scoped>
.ctn {
  background: #f5f5f5;
  .top-bar {
    padding: 15px 30px;
    border-bottom: 1px solid #dfdfdf;
    background: #fff;
  }
  .board {
    padding: 50px 0;
    text-align: center;
    background: #fff;
    .number {
      font-size: 42px;
      margin-bottom: 10px;
      span {
        font-size: 16px;
      }
    }
    .red {
      color: red;
    }
    .text {
      color: #666;
    }
  }
  .table-container {
    background: #fff;
    margin-top: 30px;
  }
}
</style>
